<template>
    <div class="pd-30">
        <div class="flex">
            <div class=" center">
                <p>姓名：</p>
                <el-input class="w-280" v-model="input" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p>手机号：</p>
                <el-input class="w-280" v-model="input1" placeholder="请输入手机号"></el-input>
            </div>
            <div class=" center">
                <p>性别：</p>
                <el-select class="w-280" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="flex mt-10">
            <div class="flex">
                <!-- <el-input v-if="value1 != 1" class="w-280 ml-194" v-model="input"
                    :placeholder="`请输入${options1[value1 - 1].label}名称`"></el-input> -->
            </div>
            <div class="flex">
                <el-button class="w-100" @click="chongzhi">重置</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" @click="addUser">添加</el-button>
            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <!-- <el-table-column prop="pic" label="头像">
                <template #default="{ row }">
                    <img :src="row.pic" class="w-50 h-50" style="object-fit: cover;" alt="">
                </template>
            </el-table-column> -->
            <el-table-column prop="name" label="教师姓名">
            </el-table-column>
            <el-table-column prop="birthday" label="生日">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
                <template #default="{ row }">
                    <p v-if="row.gender == 1">男</p>
                    <p v-else>女</p>
                </template>
            </el-table-column>
            <el-table-column prop="grade" label="年级">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="school" label="学校">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p class="red" v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total"  @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="show" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '新增学生' : '编辑学生' }}</h4>
            </span>
            <div class="plr-30 scroll">  
                <div class="flex_l">
                    <div class="w-100">姓名：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">手机号：</div>
                    <el-input class="w-350 ml-20" v-model="form.phone" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">生日：</div>
                    <el-date-picker v-model="form.birthday" class="w-350 ml-20" type="date" @change="timeChange" placeholder="选择生日">
                    </el-date-picker>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">性别：</div>
                    <el-select class="w-350 ml-20" v-model="form.gender" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">学校：</div>
                    <el-input class="w-350 ml-20" v-model="form.school" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">年级：</div>
                    <el-input class="w-350 ml-20" v-model="form.grade" placeholder="请输入"></el-input>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { cusUserZinvAdd, cusUserZinvEdit, cusUserZinvList, cusUserZinvRemove } from '@/api/hhr.js'
export default {
    name: "Teacher",
    data() {
        return {
            show: false,
            options: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '男'
            }, {
                value: '2',
                label: '女'
            }],
            value: '',
            input: '',
            input1: '',
            tableData: [],
            page: 1,
            total: 0,
            form: {
                grade:'',
                birthday:'',
                gender:'',
                id:'',
                name:'',
                phone:'',
                school:'',
            },
            dialogImageUrl: '',
            type: '',//1新增 2修改
            upUrl: '',
            imgList:[]
        }
    },
    mounted() {
        this.getUserList()
        this.upUrl = this.$baseUrl + '/apis/000/002-uploadFileForJson'
    },
    methods: {
        timeChange(e){
            var date = new Date(e)
            const year = date.getFullYear().toString();  // 获取年份的后两位
            const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，并补充0
            const day = date.getDate().toString().padStart(2, '0');  // 获取日期，并补充0
            this.form.birthday = year+'-'+month+'-'+day
        },
        chongzhi(){
            this.input = ''
            this.input1 = ''
            this.value = ''
            this.getUserList()
        },
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        changeJs(e) {
            this.form.thirdId = e
            this.form.thirdName = this.options1.filter(item => item.value === e)[0].label;
        },
        addUser() {
            for (var i in this.form) {
                if (i != 'platform' && i != 'thirdId' && i != 'thirdName' && i != 'roles') {
                    this.form[i] = ''
                }
            }
            this.show = true
            this.type = 1
        },
        submit() {
            var apiFunction = this.type == 1 ? cusUserZinvAdd : cusUserZinvEdit
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.show = false
                    this.getUserList()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        getUserList() {
            cusUserZinvList({
                pageNum: this.page,
                pageSize: 10,
                // gender: this.value,
                name: this.input,
                phone:this.input1
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.type = 2
            this.imgList = [{name:'1',url:type.pic}]
            this.show = true
        },
        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                cusUserZinvRemove({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.pic = ''
        },
        handlePictureCardPreview(file) {
            this.form.pic = file.list[0].url
        }
    }
}
</script>